<template>
  <el-dialog :title="'请完善用户信息'" :center="true" :visible.sync="visible" :modal-append-to-body="true" :append-to-body="true" @close="closeEvent" :lock-scroll="true" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" custom-class="regiser-dialog" @open="initDialog">
    <el-form :model="model" ref="registerForm" :rules="rules" :label-width="'230px'">
      <el-form-item label="姓名" prop="xm" class="line-break" :inline-message="true">
        <el-input v-model="model.xm" size="mini" readonly></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="sfzh" class="line-break" :inline-message="true">
        <el-input v-model="model.sfzh" size="mini" readonly></el-input>
      </el-form-item>
      <el-form-item label="警号" prop="jh" :inline-message="true" class="line-break">
        <el-input v-model="model.jh" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="单位名称" prop="gzd" class="line-break" :inline-message="true">
        <el-cascader :options="mix_xzqhList" ref="workChoose" v-model="model.gzd" filterable :props="mix_propMap" size="small" expand-trigger="hover" clearable :show-all-levels="false">
        </el-cascader>
      </el-form-item>
      <el-form-item label="手机号码" prop="sjhm" class="line-break" :inline-message="true">
        <el-input v-model="model.sjhm" size="mini"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="save()">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import policeMixin from '@/helper/police';
  import authMixin from '@/base/mixin/auth';
  export default {
    mixins: [policeMixin, authMixin],
    props: {
      visible: {
        type: Boolean
      },
      data: {
        type: Object
      }
    },
    data() {
      let validateMobile = (rule, value, callback) => {
        if (!/^1[34578]\d{9}/.test(value)) {
          callback(new Error('手机号码有误，请重新填写'));
        } else {
          callback();
        }
      };
      let validateWorkplace = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请选择单位'));
        } else if (value instanceof Array && value.length === 0) {
          callback(new Error('请选择单位'));
        } else {
          callback();
        }
      };
      let validateJh = (rule, value, callback) => {
        if (value.toString().length !== 6) {
          callback(new Error('请输入正确格式的警号'));
        } else {
          callback();
        }
      };
      return {
        workSelectShow: false,
        model: {
          gzd: []
        },
        rules: {
          sjhm: [
            { required: true, message: '请填写手机号码', trigger: 'blur' },
            { validator: validateMobile, trigger: 'change' }
          ],
          gzd: [{ validator: validateWorkplace, trigger: 'change' }],
          jh: [
            {
              required: true,
              message: '请输入警号',
              trigger: 'blur'
            },
            {
              validator: validateJh,
              message: '请输入6位数字',
              trigger: 'blur'
            }
          ]
        }
      };
    },
    methods: {
      initDialog() {
        this.$nextTick(() => {
          this.$refs.registerForm.resetFields();
          let xzqh = '',
            pcs = '';
          if (this.data.dw) {
            xzqh = this.data.dw.slice(0, 6);
            pcs = this.data.dw;
          }
          this.model = Object.assign(
            {},
            { ...this.data },
            {
              gzd: [xzqh, pcs]
            }
          );
        });
      },
      closeEvent() {
        this.$emit('close');
      },
      save() {
        this.$refs.registerForm.validate(valid => {
          if (valid) {
            let postData = Object.assign({}, this.model, {
              dw: this.model.gzd[1],
              gzd: undefined
            });
            // 从mixin的 this.cgabunits变量中直接取原始的派出所列表
            delete postData.xm;
            delete postData.sfzh;
            this.saveUserInfo(postData)
              .then(res => {
                if (res) {
                  if (res.dw) {
                    let dwcn = this.cgabunits.pcsList.find(r => {
                      return r.code === res.dw;
                    });
                    if (dwcn) {
                      res.dwcn = dwcn.note;
                    }
                  }
                  this.$emit('success', res);
                  this.closeEvent();
                }
              })
              .catch(e => {
                this.$message({
                  type: 'warning',
                  message: `保存用户信息失败：${e}`
                });
              });
          }
        });
      }
    },
    created() {
      this.mix_getPcs();
    }
  };
</script>
<style  type="text/scss" lang="scss">
  .register-dialog {
    &.el-dialog .el-dialog__body {
      text-align: center;
    }
  }
</style>